<template>
  <div class="monitorTable">
    <ul class="tableColumns">
      <li
        class="listItem"
        v-for="(item, i) of state.columns"
        :key="i"
        :style="getColumnStyle(item)"
      >
        {{ item.title }}
      </li>
    </ul>
    <vue3ScrollSeamless
      class="tableScrollWrap"
      :classOptions="{ step: 0 }"
      :dataList="state.dataSource"
    >
      <ul class="listWrap" v-if="state.dataSource && state.dataSource.length > 0">
        <li class="listItem" v-for="(item, i) of state.dataSource" :key="i">
          <p
            v-for="(child, index) in state.columns"
            :key="index"
            :style="getColumnStyle(child)"
            :data-source="JSON.stringify(item)"
          >
            <template v-if="child.dataIndex === 'tm'">
              {{
                item?.tm ? dayjs(item?.tm).format("YYYY-MM-DD HH:mm") : "--"
              }}
            </template>
            <template v-else>{{ item[child.dataIndex] }}</template>
          </p>
        </li>
      </ul>
      <div class="emptyText" v-else>
        <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无预警" />
      </div>
    </vue3ScrollSeamless>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, inject, watch } from "vue";
  import { Empty } from "ant-design-vue";
  import { vue3ScrollSeamless } from "vue3-scroll-seamless";
  // import { getWaterWarningData } from '@/api/oneMap/baseData';
  import dayjs from "dayjs";

  defineOptions({ name: "MonitorTable" });

  const state = reactive({
    loading: false,
    columns: [
      { title: "测站", dataIndex: "name", key: "name", align: "center" },
      { title: "开启时间", dataIndex: "startTime", key: "startTime", width: "200px", align: "center" },
      { title: "关闭时间", dataIndex: "endTime", key: "endTime", width: "200px", align: "center" },
    ],
    dataSource: [],
  });

  // 计算属性来动态计算样式
  const getColumnStyle = (column) => {
    return {
      width: column.width || `${100 / state.columns.length}%`,
    };
  };

  // 监听数据变化
  const detailData = inject('DetailData');
  watch(
    () => detailData.value,
    () => {
      getTableDataSource();
    }
  );

  const getTableDataSource = async () => {
    state.loading = true;
    state.dataSource = detailData.value.data;
    state.loading = false;
  };
</script>

<style lang="less" rel="stylesheet/less" scoped>
.monitorTable {
  width: 100%;
  height: 100%;
  .tableColumns {
    width: 100%;
    height: 26px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(220, 237, 255, 0.2);
    background: #026ec261;
    position: relative;
    margin-bottom: 6px;
    &::before {
      content: "";
      width: 2px;
      height: 10px;
      background: #d7eeff;
      position: absolute;
      left: 0px;
      opacity: 0.8;
    }
    &::after {
      content: "";
      width: 2px;
      height: 10px;
      background: #d7eeff;
      position: absolute;
      right: 0px;
      opacity: 0.8;
    }
    li {
      width: 100%;
      padding: 8px 8px;
      font-size: 12px;
      text-align: center;
      color: #d7eeff;
      position: relative;
      &::after {
        content: "";
        width: 0;
        height: 0;
        display: inline-block;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #06b7fd;
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .tableScrollWrap {
    width: 100%;
    height: calc(100% - 38px);
    min-height: 150px !important;
    overflow: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    ul.listWrap {
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
    }
    li.listItem {
      width: 100%;
      min-height: 30px;
      margin-bottom: 4px;
      /* border: 1px solid #DCEDFF4D;
        background: #026EC21F; */
      background: url(./table_bg.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      color: #fff;
      padding: 0 10px;
      p {
        width: 100%;
        color: #fff;
        text-align: center;
        font-size: 12px;
      }
      &:hover {
        background: url(./table_bg_a.png) no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
    ::v-deep(.ant-empty-description) {
      color: #fff;
    }
  }
  .action1 {
    color: #51fbff;
  }
  .action2 {
    color: #ff3036;
  }
  .result2 {
    color: #ff8a00;
  }
}
</style>
